feat: add package manager select dropdown #379
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
|
||
| <template> | ||
| <div class="relative"> | ||
| <button |
There was a problem hiding this comment.
Chose to build a custom dropdown because I think icons don't show up well in native select. Someone please correct me if I'm wrong!
|
Not quite ready for review there's a bug when the install container is short 
|
app/components/ConnectorModal.vue
Outdated
| aria-hidden="true" | ||
| /> | ||
| </button> | ||
| <div class="ml-auto flex items-center gap-2"> |
There was a problem hiding this comment.
use ms-auto instead ml-auto (RTL support): check the contributing guide: https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#rtl-support
| </template> | ||
| </ClientOnly> | ||
| <span | ||
| class="i-carbon-chevron-down w-3 h-3" |
There was a problem hiding this comment.
use : to split collection and icon (small perf at UnoCSS)
|
much nicer 👌 |
| : undefined | ||
| " | ||
| :aria-label="$t('settings.package_manager')" | ||
| class="absolute right-0 top-full mt-1 min-w-28 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 overflow-hidden py-1" |
There was a problem hiding this comment.
don't use left/right use inset-is and inset-ie respectivelly (when using absolute psotioning)
| <span>{{ pm.label }}</span> | ||
| <span | ||
| v-if="selectedPM === pm.id" | ||
| class="i-carbon-checkmark w-3 h-3 text-accent ml-auto shrink-0" |
There was a problem hiding this comment.
replace ml-auto with ms-auto
|
FYI: #393 might mean this needs to have conflicts resolved. we wouldn't render the tabs any more of course, but we'd keep the same approach for rendered install commands |
This replaces the tab list so it's extra clear to the user what package manager they've selected. It also lets use use it in the connector modal to be explicit on the package manager choice.
jonathanyeong
force-pushed
the
feat/add-pm-dropdown
branch
from
6b62ba1 to
c82d65d
Compare
| <PackageManagerTabs /> | ||
| <PackageManagerSelect /> |
There was a problem hiding this comment.
TODO: Remove PackageManagerTabs
3 participants
This replaces the tab list so it's extra clear to the user what package manager they've selected. It also lets use use it in the connector modal to be explicit on the package manager choice.
The dropdown is inspired by Stripe's dev docs
Testing
desktop-view-with-keyboard-nav.mp4
mobile-view.mp4